{extend name='template/base'}{/extend}
{block name='title'}{/block}
{block name='style'}{/block}
{block name='script'}{/block}
{block name='content'}
<header class="header">
    <div>
        我的订单
    </div>
</header>

<div  class="pages">

    <div id="tab-head" class="tab-head">
        <ul>
            <li v-bind:class="[0==t_index? 'active' : '']" @tap="tab_0(0)"><a>全部</a></li>
            <li v-bind:class="[1==t_index? 'active' : '']" @tap="tab_1(1)"><a>待付款</a></li>
            <li v-bind:class="[2==t_index? 'active' : '']" @tap="tab_2(2)"><a>货到付款</a></li>
            <li v-bind:class="[3==t_index? 'active' : '']" @tap="tab_3(3)"><a>正在配送</a></li>
        </ul>
    </div>

    <div  class="tab-body">
        <div id="refreshContainer" class="mui-scroll-wrapper">
            <div  class="mui-scroll">
                <div  id="order_div"  class="list-form other">
                    <template v-for="item in items">
                    <ul  v-for="vo in item" class="mui-table-view mui-table-view-chevron">
                        <li @tap.stop="detail(vo.order_id)">
                            <div>
                                {{vo.flag_status.text}}
                                <span class="pull-right">{{vo.order_time}}</span>
                            </div>
                            <div>订单号：{{vo.order_sn}} <span>{{vo.shopStore.name}} </span></div>
                        </li>
                        <li class="goods-list" @tap.stop="detail(vo.order_id)">
                            <ul>
                                <li v-for="gvo in vo.shopGoods">
                                    <div class="img"><img
                                            :src="gvo.cover_image"
                                            height="441"
                                            width="500"/></div>
                                    <div class="text">
                                        <div class="title">{{gvo.name}}</div>
                                        <div>
                                            <p class="font12">数量：{{gvo.quantity}}</p>
                                            <p class="font12" >总价：￥{{gvo.amount}}</p>
                                        </div>
                                    </div>
                                </li>

                                <!--<li>-->
                                    <!--<div class="img"><img-->
                                            <!--src="../../../../public/wechat/static/image/timo.jpg"-->
                                            <!--height="441"-->
                                            <!--width="500"/></div>-->
                                    <!--<div class="text">-->
                                        <!--<div class="title">商品名称</div>-->
                                        <!--<div>-->
                                            <!--<p class="font12">数量：1</p>-->
                                            <!--<p class="font12" 4>总价：￥24.8</p>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</li>-->
                            </ul>
                        </li>
                        <li style="min-height: 43px;">
                            <div class="absmiddle-left">
                                <div>小计：<span class="color-primary">￥{{vo.pay_amount}}</span></div>
                            </div>
                            <div class="text-right">
                                <a v-if ='(vo.flag_pay==0&&vo.flag_status.value==0)'  @tap.stop="cancel_order(vo.id)"  class="btn">取 消</a>
                                <a  v-if ='(vo.flag_pay==0&&vo.flag_status.value!=4&&vo.flag_status.value!=5&&vo.flag_status.value!=6)'  @tap.stop="order_item_pay(vo.id)" class="btn color-primary">立即支付</a>
                            </div>
                        </li>
                    </ul>
                    </template>
                    <!--<ul>-->
                    <!--<li>-->
                    <!--<div>-->
                    <!--未支付-->
                    <!--<span class="pull-right">2017-06-01 12:00:00</span>-->
                    <!--</div>-->
                    <!--<div>订单号：2017060112345 <span>有间便利店</span></div>-->
                    <!--</li>-->
                    <!--<li class="goods-list">-->
                    <!--<ul>-->
                    <!--<li>-->
                    <!--<div class="img"><img-->
                    <!--src="../../../../public/wechat/static/image/timo.jpg"-->
                    <!--height="441"-->
                    <!--width="500"/></div>-->
                    <!--<div class="text">-->
                    <!--<div class="title">商品名称</div>-->
                    <!--<div>-->
                    <!--<p class="font12">数量：1</p>-->
                    <!--<p class="font12" 4>总价：￥24.8</p>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</li>-->
                    <!--<li>-->
                    <!--<div class="img"><img-->
                    <!--src="../../../../public/wechat/static/image/timo.jpg"-->
                    <!--height="441"-->
                    <!--width="500"/></div>-->
                    <!--<div class="text">-->
                    <!--<div class="title">商品名称</div>-->
                    <!--<div>-->
                    <!--<p class="font12">数量：1</p>-->
                    <!--<p class="font12" 4>总价：￥24.8</p>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</li>-->
                    <!--</ul>-->
                    <!--</li>-->
                    <!--<li>-->
                    <!--<div class="absmiddle-left">-->
                    <!--<div>小计：<span class="color-primary">￥99.2</span></div>-->
                    <!--</div>-->
                    <!--<div class="text-right">-->
                    <!--<a href="" class="btn">评 价</a>-->
                    <!--</div>-->
                    <!--</li>-->
                    <!--</ul>-->
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name='script_extra'}
<script>
    var list_url = "{:url('order/Order/index')}";
    var order_item_pay_url = "{:url('order/Order/order_item_pay')}";
    var cancel_order_url = "{:url('order/Order/cancel_order')}";
    var detail_url = "{:url('order/Order/detail')}";
    require(['order/index']);
</script>
{/block}